/*!
 * Thumbnail helper for fancyBox
 * version: 1.0.7 (Mon, 01 Oct 2012)
 * @requires fancyBox v2.0 or later
 *
 * Usage:
 *     $(".fancybox").fancybox({
 *         helpers : {
 *             thumbs: {
 *                 width  : 50,
 *                 height : 50
 *             }
 *         }
 *     });
 *
 */
(function($) {
  //Shortcut for fancyBox object
  var F = $.fancybox;

  //Add helper object
  F.helpers.thumbs = {
    defaults: {
      width: 50, // thumbnail width
      height: 50, // thumbnail height
      position: 'bottom', // 'top' or 'bottom'
      source: function(item) {
        // function to obtain the URL of the thumbnail image
        var href;

        if (item.element) {
          href = $(item.element)
            .find('img')
            .attr('src');
        }

        if (!href && item.type === 'image' && item.href) {
          href = item.href;
        }

        return href;
      },
    },

    wrap: null,
    list: null,
    width: 0,

    init: function(opts, obj) {
      var that = this,
        list,
        thumbWidth = opts.width,
        thumbHeight = opts.height,
        thumbSource = opts.source;

      //Build list structure
      list = '';

      for (var n = 0; n < obj.group.length; n++) {
        list +=
          '<li><a style="width:' +
          thumbWidth +
          'px;height:' +
          thumbHeight +
          'px;" href="javascript:jQuery.fancybox.jumpto(' +
          n +
          ');"></a></li>';
      }

      this.wrap = $('<div id="fancybox-thumbs"></div>')
        .addClass(opts.position)
        .appendTo('body');
      this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

      //Load each thumbnail
      $.each(obj.group, function(i) {
        var el = obj.group[i],
          href = thumbSource(el);

        if (!href) {
          return;
        }

        $('<img />')
          .load(function() {
            var width = this.width,
              height = this.height,
              widthRatio,
              heightRatio,
              parent;

            if (!that.list || !width || !height) {
              return;
            }

            //Calculate thumbnail width/height and center it
            widthRatio = width / thumbWidth;
            heightRatio = height / thumbHeight;

            parent = that.list
              .children()
              .eq(i)
              .find('a');

            if (widthRatio >= 1 && heightRatio >= 1) {
              if (widthRatio > heightRatio) {
                width = Math.floor(width / heightRatio);
                height = thumbHeight;
              } else {
                width = thumbWidth;
                height = Math.floor(height / widthRatio);
              }
            }

            $(this).css({
              width: width,
              height: height,
              top: Math.floor(thumbHeight / 2 - height / 2),
              left: Math.floor(thumbWidth / 2 - width / 2),
            });

            parent.width(thumbWidth).height(thumbHeight);

            $(this)
              .hide()
              .appendTo(parent)
              .fadeIn(300);
          })
          .attr('src', href)
          .attr('title', el.title);
      });

      //Set initial width
      this.width = this.list
        .children()
        .eq(0)
        .outerWidth(true);

      this.list
        .width(this.width * (obj.group.length + 1))
        .css(
          'left',
          Math.floor(
            $(window).width() * 0.5 -
              (obj.index * this.width + this.width * 0.5)
          )
        );
    },

    beforeLoad: function(opts, obj) {
      //Remove self if gallery do not have at least two items
      if (obj.group.length < 2) {
        obj.helpers.thumbs = false;

        return;
      }

      //Increase bottom margin to give space for thumbs
      obj.margin[opts.position === 'top' ? 0 : 2] += opts.height + 15;
    },

    afterShow: function(opts, obj) {
      //Check if exists and create or update list
      if (this.list) {
        this.onUpdate(opts, obj);
      } else {
        this.init(opts, obj);
      }

      //Set active element
      this.list
        .children()
        .removeClass('active')
        .eq(obj.index)
        .addClass('active');
    },

    //Center list
    onUpdate: function(opts, obj) {
      if (this.list) {
        this.list.stop(true).animate(
          {
            left: Math.floor(
              $(window).width() * 0.5 -
                (obj.index * this.width + this.width * 0.5)
            ),
          },
          150
        );
      }
    },

    beforeClose: function() {
      if (this.wrap) {
        this.wrap.remove();
      }

      this.wrap = null;
      this.list = null;
      this.width = 0;
    },
  };
})(jQuery);
